<script setup lang="ts">
import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import {
  ClassicEditor,
  Paragraph,
  SpecialCharacters,
  Undo,
  Bold,
  Italic,
  Underline,
  MediaEmbed,
} from "ckeditor5"; //引入插件【必须】
import "ckeditor5/ckeditor5.css";
import type { EditorConfig } from "ckeditor5";
import coreTranslations from "ckeditor5/translations/zh-cn.js";
const config: EditorConfig = {
  licenseKey: "GPL",
  translations: [coreTranslations],
  toolbar: {
    items: ["undo", "redo", "|", "bold", "italic", "underline"],
  },
  plugins: [
    Paragraph,
    SpecialCharacters,
    Undo,
    Bold,
    Italic,
    Underline,
    MediaEmbed,
  ],
  placeholder: "请填写商品简介",
};
</script>

<template>
  <Ckeditor :editor="ClassicEditor" :config="config"></Ckeditor>
</template>

<style>
.ck .ck-powered-by {
  display: none !important;
}
.ck-editor__editable_inline {
  height: 200px !important;
}
.ck-editor__editable:focus {
  border: 1px solid #ccced1 !important;
}
.ck-focused {
  box-shadow: none !important;
}
</style>
